<template>
	<BasePage title="登录页" showNavImg>
		<view class="image-wrapper">
			<image src="@/static/image/logo.png" mode="widthFix" style="width: 72px;" />
		</view>
		<button class="login-button" @tap="loginAction()">
			注册/登录
		</button>
		<view class="agreement">
			<CustomCheckbox v-model="agreed" />
			<view @tap="agreementAction()">
				已阅读并同意
				<text style="color: #AD1B22;">
					《用户协议》
				</text>
				和
				<text style="color: #AD1B22;">
					《隐私协议》
				</text>
			</view>
		</view>
	</BasePage>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import BasePage from '@/components/page-base/index.vue';
	import CustomCheckbox from '@/components/custom-checkbox/index.vue'

	/* 协议勾选状态 */
	const agreed = ref(false)

	const loginAction = () => {
		console.log("loginAction agreed=", agreed);
		if (!agreed.value) {
			uni.showModal({
				title: '提示',
				content: '点击确定即视为同意《用户协议》和《隐私协议》',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						agreed.value = true
						setTimeout(() => {
							console.log("准备跳转到首页");
							uni.navigateTo({
								url: '/sub-packages/register/index'
							})
						}, 500)
					}
				}
			});
		} else {
			uni.navigateTo({
				url: '/sub-packages/register/index'
			})
		}
	}

	const agreementAction = () => {

	}
</script>

<style scoped>
	.image-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 30%;
	}

	.login-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 8px;
		height: 44px;
		margin-top: 40%;
		border-radius: 22px;
		background: linear-gradient(180deg, #AD1B22 3%, #7B0006 100%);
		color: white;
		font-size: 16px;
		font-weight: 500;
	}

	.agreement {
		position: fixed;
		bottom: 30px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 500;
		color: #333;
	}
</style>